<template>
	<div class="wrap">
		<div class="nav" v-for="(item, index) in sidebarMenu" :key="index">
			<div class="nav-item" v-if="item.children">
				<div class="nav-title">{{item.meta.title}}</div>
				<div class="child-nav" v-for="(childrenItem, index) in item.children" :key="index">
					<el-button size="mini" @click="onRoute(childrenItem.path)">
						{{childrenItem.meta.title}}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// import LOG from '@/api/login.js'
	import {
		mapState
	} from 'vuex'

	export default {
		name: 'home',
		data() {
			return {}
		},
		computed: {
			...mapState({
				sidebarMenu: state => state.permission.sidebarMenu
			}),
		},
		mounted() {
			console.log(this.sidebarMenu)
		},
		methods: {
			onRoute(val) {
				let self = this;
				self.$router.push(val);
			},
			// getLastLogin() {
			// 	let self = this;
			// 	LOG.loginLogs()
			// }
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		.nav-item {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
			padding: 20px;
			background-color: #fff;

			.nav-title {
				padding-right: 20px;
				font-size: 14px;
				font-weight: bold;
			}

			.child-nav {
				display: flex;
				flex-wrap: wrap;

				.el-button {
					margin: 0 10px;
				}
			}
		}
	}
</style>
